<template>
  <div>
    <div id="map1"></div>
  </div>
</template>

<script>
export default {
  name: 'map1',
  props:['load','mapCenter', 'zoom'],
  data(){
    return {
      iframeData: null,
      mapStyle: '',
    }
  },
  // inject: ['AppNode'],
  created(){
    let that = this
    this.iframeData = this.$store.state.iframeData
  },
  mounted(){
    this.init()
  },
  watch: {
    '$store.state.iframeData':{
      deep: true,
      handler(){
        this.iframeData = this.$store.state.iframeData
        this.mapStyle = 'amap://styles/15c156c5b20fe4a5e7bf012e992af5b3'
        this.init()
      }
    },
    '$store.state.backTheme':{
      deep: true,
      handler(){
        this.mapStyle = ''
        this.init()
      }
    }
  },
  methods: {
    init() {
      if(this.iframeData || this.$store.state.backTheme){
        this.mapStyle = 'amap://styles/15c156c5b20fe4a5e7bf012e992af5b3'
      }
      window.map1 = new window.AMap.Map("map1", {
        zoom: this.zoom,
        center: this.mapCenter,
        resizeEnable: true,
        // rotateEnable:false,
        pitchEnable:false,
        animateEnable:false,
        mapStyle: 'amap://styles/15c156c5b20fe4a5e7bf012e992af5b3',
        viewMode: '3D', 
        skyColor:'#0000'
        // mapStyle: "amap://styles/dark"
        // mapStyle: "amap://styles/3289e3cb54b1765aa61be9eb618f4c97",
        // mapStyle: "amap://styles/15c156c5b20fe4a5e7bf012e992af5b3"
        // mapStyle: "amap://styles/0a719ef7a4dba045efccf83dd7abd6b4",
      });
      window.mapLoca1 = new Loca.Container({
        map: window.map1
      });
      window.map1.on('complete',function(e){
        // let layers = window.map1.getLayers();
        // console.log(window.map1.getLayers())
        // layers.forEach(item => {
        //   if(
        //     item.CLASS_NAME=='AMap.SkyLayer'
        //   // ||item.CLASS_NAME=='AMap.NebulaLaye'
        //   // ||item.CLASS_NAME=='AMap.Buildings'
        //   // ||item.CLASS_NAME=='AMap.Nebula.LabelsLayer'
        //   // ||item.CLASS_NAME=='AMap.Inner.LabelsLayer'
        //   // ||item.CLASS_NAME=='AMap.VectorLayer'
        //   // ||item.CLASS_NAME=='AMap.GLCustomLayer'
        //   ){
        //      window.map1.remove(item)
        //   }
        // });
        // console.log(window.map1.getLayers())
      })
      this.load()
    }
  }, 
  beforeDestroy(){
    window.map1.clearMap()
    window.mapLoca1.destroy()
    window.mapLoca1=null
    window.map1.destroy()
    window.map1 = null
  }
}
</script>

<style scoped>
#map1{
  /* position: absolute; */
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  /* right: 0px;
  bottom: 0px; */
  z-index: 1;
  background-color: transparent !important;
  background-image: none !important;
}
</style>

